import { useState } from 'react';
import { message } from 'antd';
//@ts-ignore
import { CopyToClipboard } from 'react-copy-to-clipboard';
// @ts-ignore
import SyntaxHighlighter from 'react-syntax-highlighter';
// @ts-ignore
// import codeTheme from 'react-syntax-highlighter/dist/esm/styles/hljs/stackoverflow-dark';
// @ts-ignore
import codeTheme from 'react-syntax-highlighter/dist/esm/styles/hljs/atom-one-dark';
import { CopyOutlined } from '@ant-design/icons';
import './index.less';

type propsType = {
  codeString?: string;
  language: 'txt' | 'javascript' | 'java' | 'axios' | 'json' | undefined | string;
  showLineNumbers?: boolean;
};

const CodeHighlighting = (props: propsType) => {
  const { codeString, showLineNumbers = true, language = 'txt' } = props;
  const [isHovered, setIsHovered] = useState(false);

  const handleCopy = () => {
    message.success('复制成功');
    setIsHovered(false);
  };

  return (
    <div
      onMouseEnter={() => {
        setIsHovered(true);
      }}
      onMouseLeave={() => {
        setTimeout(() => {
          setIsHovered(false);
        }, 100);
      }}
    >
      {isHovered && (
        <CopyToClipboard text={codeString} onCopy={handleCopy}>
          <CopyOutlined
            style={{
              position: 'absolute',
              top: '10px',
              right: '15px',
              cursor: 'pointer',
              fontSize: '20px',
              zIndex: '1',
              color: 'white',
            }}
            className={isHovered ? 'clicked' : ''}
          />
        </CopyToClipboard>
      )}
      <SyntaxHighlighter
        showLineNumbers={showLineNumbers}
        PreTag="div"
        language={language}
        lineNumberStyle={{ fontSize: 10 }}
        style={codeTheme}
      >
        {codeString}
      </SyntaxHighlighter>
    </div>
  );
};

export default CodeHighlighting;
